@import "base";

@mixin title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: vw(33);
    .left{
        i,span{
            vertical-align: middle;
        }
        i{
            font-size: vw(56);
            color: $color;
        }
        span{
            font-size: vw(30);
        }
    }
    .right{
        i,span{
            vertical-align: middle;
        }
        span{
            font-size: vw(24);
        }
        i{
            width: vw(25);
            color: $color;
        }
    }
}
.wrap{
    display: flex;
    height: 100vh;
    flex-direction: column;
    header{
        height: vw(150);
        margin: vw(17) vw(23) vw(9);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo{
            img{
                display: block;
                width: vw(123);
            }
        }
        .search{
            position: relative;
            input{
                width: vw(266);
                height: vw(51);
                line-height:vw(51);
                border: 2px solid $color;
                border-radius: vw(10);
                box-sizing: border-box;
                padding-right: vw(35);
                padding-left: vw(14);
            }
            i{
                position: absolute;
                right: vw(8);
                top: vw(8);
                color: $color;
            }
        }
        .selectBox{
            position: relative;
            select{
                width: vw(159);
                height: vw(56);
                line-height: vw(56);
                font-size: vw(26);
                border: solid 2px $color;
                appearance: none;
                padding-left: vw(14);
            }
            i{
                position: absolute;
                top: 45%;
                right: vw(30);
                border-width: vw(16);
                border-style: solid;
                border-color: $color transparent transparent transparent;
            }
        }
        a{
            button{
                width: vw(123);
                height: vw(57);
                border-radius: vw(20);
                border: solid 2px #ff9344;
                text-align: center;
                line-height: vw(57);
                color: #000;
            }
        }
        h2{
            font-size: vw(26);
        }
        >i{
            color: $color;
            font-size: vw(55);
        }
    }
    main {
        flex: 1;
        overflow: auto;
        padding: 0 vw(20);
        .title {
            @include title;
        }
    }
    footer{
        padding: 0 vw(49);
        margin-top: vw(10);
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a{
            i{
                font-size: vw(73);
                color: $color;
            }
            p{
                color: #000;
            }
        }
    }
}
